/* components */
import { BaseSelectUserTreeComponent, BaseSelectUserNoDataView } from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum, SelectUserProjectTeam } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import {
  useBaseSelectUserStoreLoadingMap,
  useBaseSelectUserStoreProjectTeamList,
  useBaseSelectUserStoreCurrentToggleProjectTeam
} from '@src/component/common/BaseSelectUser/store'

import { useFetchProjectTeamUserList } from '@src/component/common/BaseSelectUser/hooks'

/* scss */
import '@src/component/common/BaseSelectUser/components/ProjectTeam/index.scss'

/* vue */
import { defineComponent, PropType, CreateElement, computed } from 'vue'

/* util */
import { isFalse } from '@src/util/type'

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserProjectTeamLeft,
  emits: [],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  setup() {
    const { projectTeamLoading, tabLoading } = useBaseSelectUserStoreLoadingMap()

    // 项目组人员列表
    const fetchProjectTeamUserList = useFetchProjectTeamUserList();

    // 项目列表
    const { projectTeamList, isProjectTeamListEmpty, isProjectTeamListNotEmpty } = useBaseSelectUserStoreProjectTeamList()

    // 当前选择的项目
    const { setCurrentToggleProjectTeam, currentToggleProjectTeam } = useBaseSelectUserStoreCurrentToggleProjectTeam()

    /** 
     * @description 是否显示无数据页面
     * 1. 项目列表为空
     * 2. 且 不在加载状态
    */
    const isShowNotDataView = computed(() => {
      return isProjectTeamListEmpty.value && isFalse(projectTeamLoading.value)
    })
    
    /** 
     * @description 是否不显示无数据页面
    */
    const isNotShowNotDataView = computed(() => {
      return isFalse(isShowNotDataView.value) && isProjectTeamListNotEmpty.value
    })

    const onProjectItemClickHandler = (value: SelectUserProjectTeam) => {
      setCurrentToggleProjectTeam(value)
      
      fetchProjectTeamUserList()
    }

    return {
      projectTeamList,
      projectTeamLoading,
      tabLoading,
      isNotShowNotDataView,
      isShowNotDataView,
      currentToggleProjectTeam,
      onProjectItemClickHandler
    }
  },
  methods: {
    /** 
    * @description 获取属性列表
    */
    getAttributes() {
      return {
        directives: [
          {
            name: 'loading',
            value: this.projectTeamLoading && isFalse(this.tabLoading)
          }
        ]
      }
    }
  },
  render(h: CreateElement) {
    
    const attrs = this.getAttributes()
    
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserProjectTeamLeft} {...attrs}>
        
        <BaseSelectUserTreeComponent
          v-show={this.isNotShowNotDataView}
          current-node-key={this.currentToggleProjectTeam?.id}
          data={this.projectTeamList}
          is-multi={this.isMulti}
          onClick={this.onProjectItemClickHandler}
        >
        </BaseSelectUserTreeComponent>
        
        <BaseSelectUserNoDataView v-show={this.isShowNotDataView} />
        
      </div>
    )
  }
})
